import React from "react";
import { Button, Form, Input, message } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { signIn } from "../../untils/api";
import { useHistory } from "react-router-dom";
import "./index.scss";

function Login(props) {
  var history = useHistory();
  const onFinish = (values) => {
    signIn(values).then((res) => {
      if (res.data.code == 200) {
        localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
        localStorage.setItem("token", res.data.token);
        history.push("index/home");
        message.error(res.data.msg);
      } else {
        message.error(res.data.msg);
      }
    });
  };
const targetToRegister = () => {
  history.push('/register');
};
  return (
    <div className="login">
      <Form
        style={{ background: "transparent" }}
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="userName"
          rules={[{ required: true, message: "Please input your Username!" }]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="请输入用户名"
            style={{ outline: "none", borderRadius: "20px" }}
          />
        </Form.Item>
        <Form.Item
          name="userPass"
          rules={[{ required: true, message: "Please input your Password!" }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="请输入密码"
            style={{ outline: "none", borderRadius: "20px" }}
          />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </Form.Item>
        <div style={{ color: "white" }}>
          还没有账号？
          <span className="reg" onClick={targetToRegister}>
            去注册
          </span>
        </div>
      </Form>
    </div>
  );
}

export default Login;
